依赖预构建 · 生产构建 · Rollup
官方文档：Why Bundle with esbuild · Dependency Pre-Bundling · Build Options
本篇把开发态 esbuild 预构建 与生产态 Rollup 打包 串成一条线，便于和 webpack 心智对照。
1. 开发环境为什么不「整包打包」？
浏览器原生支持 ESM（type="module"），Vite 开发服务器按请求编译当前模块，避免 webpack 式「先合并整个依赖图再启动」的路径，冷启动更快。
代价：npm 里大量包仍是 CommonJS / UMD，不能直接作为原生 ESM 被浏览器逐文件加载；因此需要一步 依赖预构建。
2. 依赖预构建（Dependency Pre-Bundling）
使用 esbuild 完成，主要解决两件事（官方表述归纳）：
- 互操作性：把 CJS/UMD 依赖打成浏览器可消费的 ESM，并修正导出形态，使 named import 写法可用。
- 性能：将依赖内部成百上千的小文件合并为少量模块，减少 HTTP 请求与解析开销（典型例子：
lodash-es深层路径）。
常见配置入口：vite.config 中的 optimizeDeps：
| 选项 | 作用 |
|---|---|
include | 强制列入预构建（漏扫、深层子路径时常用） |
exclude | 跳过预构建（已是纯净 ESM 且体积可控的包） |
esbuildOptions | 传给 esbuild 的目标、jsx、legalComments 等 |
force | 开发启动 --force 清缓存重建 |
缓存目录一般在 node_modules/.vite，升级依赖后若出现「奇怪的导出 undefined」，可先删缓存再启。
3. 生产构建为何用 Rollup？
生产环境需要稳定的 chunk 分割、Tree-shaking、压缩与可控的输出结构；Vite 选用 Rollup 作为生产打包内核（与开发态工具链分离）。
你可以在 build.rollupOptions 中：
- 配置
manualChunks手动拆 vendor； - 使用
output.manualChunks函数 按包名细分； - 声明
external若部分库改走 CDN。
4. build 常用选项（构建时常对比）
| 配置项 | 含义 |
|---|---|
target | 编译目标语法（影响语法降级与 polyfill 策略；现代浏览器可设较新） |
minify | 默认 esbuild；也可 terser（需安装） |
sourcemap | 是否产出 Source Map |
rollupOptions | 透传 Rollup，控制分包、入口、external |
chunkSizeWarningLimit | chunk 体积告警阈值 |
assetsInlineLimit | 小于该大小的资源转 base64 |
5. 与 webpack 的差异（一句话）
- 开发：Vite 优先「按需编译 + 预构建依赖」；webpack 传统路线多为「打包后再服务」。
- 生产：两者都可做出高质量产物；Vite 默认 Rollup，webpack 自带分割与插件生态更长。
更多对比简要表述见 05。